<template>
  <div class="mvc-container">
    <!-- 标题区域 -->
    <el-card class="title-card">
      <template #header>
        <div class="title-header">
          <h1>MVC 架构模式详解</h1>
          <p class="subtitle">Model-View-Controller 架构设计模式深度解析</p>
        </div>
      </template>
      <div class="intro-content">
        <p>MVC（Model-View-Controller）是一种广泛使用的软件架构模式，它将应用程序分为三个核心组件，以实现关注点分离和代码解耦。</p>
        <el-button type="primary" @click="startInteractiveTour">开启交互式学习</el-button>
      </div>
    </el-card>

    <!-- MVC 三维可视化图表 -->
    <el-row :gutter="20" class="mvc-visualization">
      <el-col :span="24">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>MVC 架构三维可视化</span>
              <div class="controls">
                <el-button-group>
                  <el-button :type="activeView === 'flow' ? 'primary' : ''" @click="activeView = 'flow'">流程图</el-button>
                  <el-button :type="activeView === 'layers' ? 'primary' : ''" @click="activeView = 'layers'">分层视图</el-button>
                </el-button-group>
              </div>
            </div>
          </template>
          <div class="mvc-diagram-container">
            <div v-if="activeView === 'flow'" class="diagram-flow">
              <div class="flow-chart">
                <div class="flow-row">
                  <div class="flow-component user">用户</div>
                  <div class="flow-arrow">→</div>
                  <div class="flow-component controller" :class="{ active: activeComponent === 'controller' }" @click="selectComponent('controller')">Controller</div>
                </div>
                <div class="flow-row">
                  <div class="flow-spacer"></div>
                  <div class="flow-arrow vertical">↓</div>
                  <div class="flow-spacer"></div>
                </div>
                <div class="flow-row">
                  <div class="flow-component model" :class="{ active: activeComponent === 'model' }" @click="selectComponent('model')">Model</div>
                  <div class="flow-arrow">←→</div>
                  <div class="flow-component view" :class="{ active: activeComponent === 'view' }" @click="selectComponent('view')">View</div>
                </div>
              </div>
            </div>
            <div v-else class="diagram-layers">
              <div class="layer-diagram">
                <div class="layer presentation-layer" :class="{ active: activeComponent === 'view' }" @click="selectComponent('view')">
                  <h3>表现层 (View)</h3>
                  <p>负责数据展示和用户交互</p>
                </div>
                <div class="layer logic-layer" :class="{ active: activeComponent === 'controller' }" @click="selectComponent('controller')">
                  <h3>逻辑层 (Controller)</h3>
                  <p>处理用户输入并协调Model和View</p>
                </div>
                <div class="layer data-layer" :class="{ active: activeComponent === 'model' }" @click="selectComponent('model')">
                  <h3>数据层 (Model)</h3>
                  <p>管理数据和业务逻辑</p>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 组件详情说明 -->
    <el-row :gutter="20" class="component-details">
      <el-col :span="24">
        <el-card>
          <template #header>
            <div class="card-header">
              <span v-if="activeComponent === 'model'">Model - 数据模型层</span>
              <span v-else-if="activeComponent === 'view'">View - 视图层</span>
              <span v-else>Controller - 控制层</span>
              <el-tag type="success" style="margin-left: 15px;">核心组件</el-tag>
            </div>
          </template>
          <div class="detail-content">
            <div v-if="activeComponent === 'model'" class="component-detail model-detail">
              <h3>Model - 数据模型层</h3>
              <p>Model 代表应用程序的数据和业务逻辑部分。它负责数据的存储、检索、更新和删除操作。</p>
              <el-row :gutter="20">
                <el-col :span="12">
                  <h4>主要职责</h4>
                  <ul>
                    <li>管理应用程序数据</li>
                    <li>封装数据访问逻辑</li>
                    <li>实现业务规则和验证</li>
                    <li>通知数据变更</li>
                  </ul>
                </el-col>
                <el-col :span="12">
                  <h4>特点</h4>
                  <ul>
                    <li>独立于用户界面</li>
                    <li>可重用性强</li>
                    <li>易于测试</li>
                    <li>与View和Controller松耦合</li>
                  </ul>
                </el-col>
              </el-row>
              <div class="code-sample">
                <pre><code>// 示例：用户模型
class UserModel {
  constructor() {
    this.users = [];
  }
  
  // 获取所有用户
  getAllUsers() {
    return this.users;
  }
  
  // 添加新用户
  addUser(user) {
    user.id = this.users.length + 1;
    this.users.push(user);
    this.notifyObservers();
  }
  
  // 删除用户
  deleteUser(userId) {
    this.users = this.users.filter(user => user.id !== userId);
    this.notifyObservers();
  }
}</code></pre>
              </div>
            </div>
            
            <div v-else-if="activeComponent === 'view'" class="component-detail view-detail">
              <h3>View - 视图层</h3>
              <p>View 负责向用户展示数据和接收用户输入。它是用户与应用程序交互的界面。</p>
              <el-row :gutter="20">
                <el-col :span="12">
                  <h4>主要职责</h4>
                  <ul>
                    <li>展示数据给用户</li>
                    <li>接收用户输入</li>
                    <li>定义用户界面布局</li>
                    <li>向Controller传递用户操作</li>
                  </ul>
                </el-col>
                <el-col :span="12">
                  <h4>特点</h4>
                  <ul>
                    <li>被动性（通常不直接修改数据）</li>
                    <li>可定制的用户界面</li>
                    <li>支持多种展示形式</li>
                    <li>与Model保持同步</li>
                  </ul>
                </el-col>
              </el-row>
              <div class="code-sample">
                <pre><code>// 示例：用户列表视图
class UserListView {
  constructor() {
    this.container = document.getElementById('user-list');
  }
  
  // 渲染用户列表
  render(users) {
    this.container.innerHTML = '';
    users.forEach(user => {
      const userElement = document.createElement('div');
      userElement.className = 'user-item';
      userElement.innerHTML = `
        &lt;h4&gt;${user.name}&lt;/h4&gt;
        &lt;p&gt;Email: ${user.email}&lt;/p&gt;
        &lt;button onclick="deleteUser(${user.id})"&gt;删除&lt;/button&gt;
      `;
      this.container.appendChild(userElement);
    });
  }
  
  // 获取用户输入
  getUserInput() {
    return {
      name: document.getElementById('name').value,
      email: document.getElementById('email').value
    };
  }
}</code></pre>
              </div>
            </div>
            
            <div v-else class="component-detail controller-detail">
              <h3>Controller - 控制层</h3>
              <p>Controller 充当 Model 和 View 之间的中介。它处理用户输入并协调模型和视图。</p>
              <el-row :gutter="20">
                <el-col :span="12">
                  <h4>主要职责</h4>
                  <ul>
                    <li>处理用户输入</li>
                    <li>操作Model数据</li>
                    <li>更新View显示</li>
                    <li>控制应用程序流程</li>
                  </ul>
                </el-col>
                <el-col :span="12">
                  <h4>特点</h4>
                  <ul>
                    <li>连接Model和View</li>
                    <li>处理业务逻辑</li>
                    <li>决定显示哪个View</li>
                    <li>响应用户交互</li>
                  </ul>
                </el-col>
              </el-row>
              <div class="code-sample">
                <pre><code>// 示例：用户控制器
class UserController {
  constructor(model, view) {
    this.model = model;
    this.view = view;
    
    // 绑定事件
    this.bindEvents();
  }
  
  // 绑定事件处理
  bindEvents() {
    // 添加用户事件
    document.getElementById('add-user').addEventListener('click', () => {
      const userData = this.view.getUserInput();
      this.addUser(userData);
    });
  }
  
  // 添加用户
  addUser(userData) {
    this.model.addUser(userData);
    this.updateView();
  }
  
  // 删除用户
  deleteUser(userId) {
    this.model.deleteUser(userId);
    this.updateView();
  }
  
  // 更新视图
  updateView() {
    const users = this.model.getAllUsers();
    this.view.render(users);
  }
}</code></pre>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 优势和劣势对比 -->
    <el-row :gutter="20" class="mvc-comparison">
      <el-col :span="12">
        <el-card class="advantages">
          <template #header>
            <div class="card-header">
              <span>MVC 优势</span>
            </div>
          </template>
          <div class="comparison-content">
            <ul>
              <li><i class="el-icon-check"></i> 关注点分离，提高代码组织性</li>
              <li><i class="el-icon-check"></i> 便于团队协作开发</li>
              <li><i class="el-icon-check"></i> 易于维护和扩展</li>
              <li><i class="el-icon-check"></i> 支持并行开发</li>
              <li><i class="el-icon-check"></i> 可重用性和可测试性强</li>
              <li><i class="el-icon-check"></i> 降低代码耦合度</li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="disadvantages">
          <template #header>
            <div class="card-header">
              <span>MVC 劣势</span>
            </div>
          </template>
          <div class="comparison-content">
            <ul>
              <li><i class="el-icon-close"></i> 学习曲线较陡峭</li>
              <li><i class="el-icon-close"></i> 增加了系统结构和实现的复杂性</li>
              <li><i class="el-icon-close"></i> 视图与控制器间存在紧密联系</li>
              <li><i class="el-icon-close"></i> 调试困难</li>
              <li><i class="el-icon-close"></i> 不适合小型项目</li>
            </ul>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 交互式演示 -->
    <el-row :gutter="20" class="interactive-demo">
      <el-col :span="24">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>交互式演示</span>
              <el-button type="success" @click="runDemo" :loading="isDemoRunning">运行演示</el-button>
            </div>
          </template>
          <div class="demo-content">
            <div class="demo-controls">
              <el-slider v-model="demoProgress" :max="100" :min="0" :step="1" show-input></el-slider>
            </div>
            <div class="demo-visualization">
              <div class="demo-user">用户</div>
              <div class="demo-mvc">
                <div class="demo-component" :class="{ active: demoProgress >= 10 }">View</div>
                <div class="demo-arrow">→</div>
                <div class="demo-component" :class="{ active: demoProgress >= 30 }">Controller</div>
                <div class="demo-arrow">→</div>
                <div class="demo-component" :class="{ active: demoProgress >= 50 }">Model</div>
                <div class="demo-arrow">→</div>
                <div class="demo-component" :class="{ active: demoProgress >= 70 }">View</div>
              </div>
              <div class="demo-result" :class="{ show: demoProgress >= 90 }">
                <p>数据已更新并显示在视图中</p>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElNotification } from 'element-plus'

// 响应式数据
const activeView = ref('3d')
const activeComponent = ref('model')
const isDemoRunning = ref(false)
const demoProgress = ref(0)

// 方法定义
const selectComponent = (component) => {
  activeComponent.value = component
  ElMessage.info(`已选择 ${component.toUpperCase()} 组件`)
}

const startInteractiveTour = () => {
  ElNotification({
    title: '交互式学习',
    message: '点击图表中的组件了解详细信息',
    type: 'success',
    duration: 3000
  })
}

const runDemo = () => {
  isDemoRunning.value = true
  demoProgress.value = 0
  
  const interval = setInterval(() => {
    demoProgress.value += 5
    if (demoProgress.value >= 100) {
      clearInterval(interval)
      isDemoRunning.value = false
      ElMessage.success('演示完成！')
    }
  }, 200)
}

// 组件挂载时的处理
onMounted(() => {
  ElNotification({
    title: '欢迎学习MVC架构',
    message: '点击图表中的组件开始学习',
    type: 'info',
    duration: 5000
  })
})
</script>

<style scoped>
.mvc-container {
  padding: 20px;
  min-height: calc(100vh - 110px);
}

.title-card {
  margin-bottom: 20px;
}

.title-header h1 {
  margin: 0;
  font-size: 2.5rem;
  color: #333;
}

.subtitle {
  font-size: 1.2rem;
  color: #666;
  margin: 10px 0 0;
}

.intro-content {
  margin-top: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 16px;
}

.mvc-diagram-container {
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 流程图样式 */
.flow-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.flow-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 15px 0;
}

.flow-component {
  padding: 20px;
  border-radius: 10px;
  background: #f8f9fa;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  min-width: 150px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.flow-component:hover {
  transform: translateY(-5px);
}

.flow-component.active {
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
}

.flow-arrow {
  margin: 0 20px;
  font-size: 1.5rem;
  font-weight: bold;
}

.flow-arrow.vertical {
  margin: 20px 0;
}

.user {
  background: linear-gradient(135deg, #ff9ff3, #f368e0) !important;
  color: white;
}

.controller {
  background: linear-gradient(135deg, #54a0ff, #2e86de) !important;
  color: white;
}

.model {
  background: linear-gradient(135deg, #ff6b6b, #ee5a24) !important;
  color: white;
}

.view {
  background: linear-gradient(135deg, #1dd1a1, #10ac84) !important;
  color: white;
}

.flow-spacer {
  width: 190px;
}

/* 分层视图样式 */
.layer-diagram {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.layer {
  padding: 30px;
  border-radius: 10px;
  background: #f8f9fa;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
}

.layer:hover {
  transform: translateX(10px);
}

.layer.active {
  transform: translateX(15px);
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
}

.presentation-layer {
  background: linear-gradient(135deg, #1dd1a1, #10ac84) !important;
  color: white;
}

.logic-layer {
  background: linear-gradient(135deg, #54a0ff, #2e86de) !important;
  color: white;
}

.data-layer {
  background: linear-gradient(135deg, #ff6b6b, #ee5a24) !important;
  color: white;
}

.layer h3 {
  margin-top: 0;
}

/* 组件详情样式 */
.component-detail h3 {
  color: #333;
  margin-top: 0;
}

.component-detail h4 {
  color: #555;
}

.code-sample {
  background: #2d3748;
  border-radius: 8px;
  padding: 15px;
  margin-top: 20px;
  overflow-x: auto;
}

.code-sample pre {
  margin: 0;
  color: #e2e8f0;
  font-size: 0.9rem;
}

/* 优势劣势对比 */
.advantages ul, .disadvantages ul {
  list-style-type: none;
  padding: 0;
}

.advantages li, .disadvantages li {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.advantages li:last-child, .disadvantages li:last-child {
  border-bottom: none;
}

.el-icon-check {
  color: #10ac84;
  margin-right: 10px;
}

.el-icon-close {
  color: #ee5a24;
  margin-right: 10px;
}

/* 交互式演示 */
.demo-content {
  padding: 20px 0;
}

.demo-visualization {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 30px;
}

.demo-user {
  padding: 20px;
  background: linear-gradient(135deg, #ff9ff3, #f368e0);
  color: white;
  border-radius: 10px;
  margin-bottom: 30px;
  font-weight: bold;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.demo-mvc {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.demo-component {
  padding: 15px 25px;
  margin: 0 10px;
  background: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.demo-component.active {
  background: #54a0ff;
  color: white;
  transform: scale(1.1);
}

.demo-arrow {
  margin: 0 15px;
  font-size: 1.2rem;
  font-weight: bold;
}

.demo-result {
  padding: 20px;
  background: linear-gradient(135deg, #1dd1a1, #10ac84);
  color: white;
  border-radius: 10px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
  font-weight: bold;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.demo-result.show {
  opacity: 1;
  transform: translateY(0);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .mvc-container {
    padding: 10px;
  }
  
  .title-header h1 {
    font-size: 1.8rem;
  }
  
  .subtitle {
    font-size: 1rem;
  }
  
  .el-col {
    margin-bottom: 15px;
  }
  
  .demo-mvc {
    flex-direction: column;
  }
  
  .demo-arrow {
    transform: rotate(90deg);
  }
}
</style>